import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './index.css';
import testRecordIcon from '../../asserts/img/graphics-test/test-record.png';
import returnButtonIcon from '../../asserts/img/graphics-test/return-button.png';
import startButtonIcon from '../../asserts/img/graphics-test/start-button.png';

// 导入图案图片
import pattern1 from '../../asserts/img/graphics-test/1.png';
import pattern2 from '../../asserts/img/graphics-test/2.png';
import pattern3 from '../../asserts/img/graphics-test/3.png';
import pattern4 from '../../asserts/img/graphics-test/4.png';
import pattern5 from '../../asserts/img/graphics-test/5.png';
import pattern6 from '../../asserts/img/graphics-test/6.png';
import pattern7 from '../../asserts/img/graphics-test/7.png';
import pattern8 from '../../asserts/img/graphics-test/8.png';
import pattern9 from '../../asserts/img/graphics-test/9.png';

// 图案图片映射
const patternImages = {
  1: pattern1,
  2: pattern2,
  3: pattern3,
  4: pattern4,
  5: pattern5,
  6: pattern6,
  7: pattern7,
  8: pattern8,
  9: pattern9,
};

function GraphicsTestPage() {
  const navigate = useNavigate();
  const [selectedPattern, setSelectedPattern] = useState(null);

  // 图形模式数据
  const patterns = [
    { id: 1, name: '3x3网格', icon: '⬜⬜⬜\n⬜⬜⬜\n⬜⬜⬜' },
    { id: 2, name: '2x2网格', icon: '⬜⬜\n⬜⬜' },
    { id: 3, name: '4x4网格', icon: '⬜⬜⬜⬜\n⬜⬜⬜⬜\n⬜⬜⬜⬜\n⬜⬜⬜⬜' },
    { id: 4, name: '5x5圆点', icon: '⭕⭕⭕⭕⭕\n⭕⭕⭕⭕⭕\n⭕⭕⭕⭕⭕\n⭕⭕⭕⭕⭕\n⭕⭕⭕⭕⭕' },
    { id: 5, name: '水滴', icon: '💧' },
    { id: 6, name: '五边形', icon: '⬟' },
    { id: 7, name: '三角形', icon: '🔺' },
    { id: 8, name: '菱形', icon: '🔸' },
    { id: 9, name: '星形', icon: '⭐' }
  ];

  const handlePatternSelect = (patternId) => {
    setSelectedPattern(patternId);
  };

  const handleStartTest = () => {
    if (selectedPattern) {
      // 跳转到图形测试界面，传递选中的图案ID
      navigate('/graphics-test/test', { 
        state: { selectedPattern } 
      });
    } else {
      alert('请先选择一个图案！');
    }
  };

  const handleTestRecord = () => {
    // 处理测试记录按钮点击
    console.log('查看测试记录');
    // 这里可以跳转到测试记录页面或显示测试记录
  };

  return (
    <div className="graphics-test-container">
      {/* 顶部导航 */}
      <div className="test-header">
        <button 
          onClick={() => navigate('/')}
          className="return-title-button"
          style={{ backgroundImage: `url(${returnButtonIcon})` }}
          title="返回"
        >
        </button>
        <div className="header-spacer"></div>
        <div className="header-right">
          <button 
            onClick={handleTestRecord}
            className="test-record-button"
            style={{ backgroundImage: `url(${testRecordIcon})` }}
            title="测试记录"
          >
          </button>
        </div>
      </div>

      {/* 测试说明 */}
      <div className="test-instruction">
        <div className="instruction-icon">🔸</div>
        <p className="instruction-text">
          请先在下列图片中选择一个你喜欢的图案，开始测试后，请在滚播的图片中选择你喜欢的图案
        </p>
      </div>

      {/* 图案选择区域 */}
      <div className="patterns-container">
        <div className="patterns-grid">
          {patterns.map((pattern) => (
            <div
              key={pattern.id}
              className={`pattern-item ${selectedPattern === pattern.id ? 'selected' : ''}`}
              onClick={() => handlePatternSelect(pattern.id)}
            >
              <div className="pattern-icon">
                <img 
                  src={patternImages[pattern.id]} 
                  alt={`图案 ${pattern.id}`}
                  className="pattern-image"
                />
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 开始测试按钮 */}
      <div className="test-actions">
        <button 
          className={`start-test-button ${selectedPattern ? 'active' : ''}`}
          style={{ backgroundImage: `url(${startButtonIcon})` }}
          onClick={handleStartTest}
          title="开始测试"
        >
        </button>
      </div>
    </div>
  );
}

export default GraphicsTestPage;
